/**
 * UploadPictureDialog module
 */
import React, {Component} from 'react';
import eventHelper from "../../utils/EventHelper";
import consts from "../../utils/consts";
import storage from "../../utils/storage";
import Upload from "../../utils/upload/Upload";

import editorWidget from "../../actions/Editor/widgets";
import editorActions from "../../actions/Editor/editor";
import editorDialog from "../../actions/Editor/dialog";
import editorPage from '../../actions/Editor/pages'
import {bindActionCreators} from 'redux';
import {connect} from 'dva';


class UploadPictureDialog extends Component {
    constructor(props) {
        super(props)
        this.state = {
            page_jump: {},
            fileUploaded: true
        }
    }

    getInitialProps() {
        return {
            root: {}
        }
    }

    updateUploaded(uploaded) {
        this.setState({fileUploaded: uploaded});
    }

    componentDidMount() {
        this.elements = {};
        this.elements.dialog = $(this.refs.dialog);
        this.elements.dialog.css({
            "marginTop": "-" + this.elements.dialog.height() * 0.5 + "px",
            "marginLeft": "-" + this.elements.dialog.width() * 0.5 + "px"
        });
    }

    handleOnCloseDialog() {
        var root = this.props.root;
        root.closeDialog();
    }

    updateDelay(result = {}) {
        const page_id = storage.data.page.page_id;
        let auto_turning = result.auto_turning,
            turning_delay = result.turning_delay,
            floating_screen = result.floating_screen,
            reference_line = result.reference_line || {},
            page_background = result.page_background;

        floating_screen && delete floating_screen.url;

        dataProvider.updatePageData({
            page_id: page_id,
            auto_turning: auto_turning,
            turning_delay: turning_delay,
            floating_screen: floating_screen,
            reference_line: reference_line,
            page_background: page_background
        }, (result) => {
            this.everypage = result;
            auto_turning = this.everypage.auto_turning;
            turning_delay = this.everypage.turning_delay;
            floating_screen = this.everypage.floating_screen;
            reference_line = this.everypage.reference_line || {};
            page_background = this.everypage.page_background || {};

            const page = dataProvider.getSpecifyPageByPageId(page_id);
            if (page) {
                page.turning_delay = turning_delay;
                page.auto_turning = auto_turning;
                page.floating_screen = floating_screen;
                page.reference_line = reference_line;
                page.page_background = page_background;
            }
            dataProvider.queryPages();
            // 触发更新3D界面中的背景图或颜色图
            eventHelper.trigger(consts.EVENTS.PAGE_BACKGROUND_CHANGED, page);
            this.setState({
                page: page
            });
        }, () => {
            this.everypage = {};
        });
    }

    handleOnSubmit() {
        console.log(this, 'this.propsthis.propsthis.propsthis.propsthis.props')
        const {editor, closeDialog, updatePage, updateWidget, setState}=this.props;
        let pageJump = this.props.pageJump
        let widget = editor.selectedWidget,
            buildWidget = this.refs.upload.getBuildWidgets();
        var param = null;
        closeDialog();
        // 浮屏背景
        if (editor.is_floating_screen) {
            var result = this.refs.upload.getBuildPageUpload();
            param = {
                custom: 1,
                url: result[0].url,
                md5: result[0].md5,
            }
            $.extend(editor.selectedPage.floating_screen, param);
            updatePage(editor.selectedPage);
            setState({selectedPage: editor.selectedPage})
            eventHelper.trigger(consts.EVENTS.PAGE_BACKGROUND_CHANGED, editor.selectedPage);

            // root.updateDelay(context.page);
            // 微信分享图标
        } else if (editor.is_h5_shared_url) {
            var result = this.refs.upload.getBuildPageUpload();
            param = {
                h5_shared_md5: result[0].md5,
                h5_shared_url: result[0].url,
            }
            $.extend(pageJump, param);
            updatePage(pageJump);
            setState({selectedPage: pageJump})
            // 微信分享图片
        } else if (editor.is_picture_shared_url) {
            var result = this.refs.upload.getBuildPageUpload();
            param = {
                picture_shared_md5: result[0].md5,
                picture_shared_url: result[0].url,
            }
            $.extend(pageJump, param);
            updatePage(pageJump);
            setState({selectedPage: pageJump})
            // h5页面背景
        } else if (editor.is_page_back) {
            var result = this.refs.upload.getBuildPageUpload();
            param = {
                url: result[0].url,
                width: result[0].width,
                height: result[0].height,
                md5: result[0].md5,
                custom: 1
            }
            editor.selectedPage.page_background = editor.selectedPage.page_background || {};
            $.extend(true, editor.selectedPage.page_background, param);

            // 触发更新3D界面中的背景图或颜色图
            eventHelper.trigger(consts.EVENTS.PAGE_BACKGROUND_CHANGED, editor.selectedPage);
            updatePage(editor.selectedPage);
            setState({selectedPage: editor.selectedPage});

            // root.setState({
            //     page: editor.page,
            // })
            // root.updateDelay(editor.page);
            // 红包品牌图片
        } else if (editor.is_logo_md5) {
            var result = this.refs.upload.getBuildPageUpload();
            param = {
                logo_md5: result[0].md5,
                logo_url: result[0].url
            }
            widget = $.extend({}, widget, param);
            setState({selectedWidegt: widget});
            updateWidget(widget);
            // root.updateSelectedWidget(widget);
            eventHelper.trigger(consts.EVENTS.THREED_WIDGET_PROPERTY_CHANGED, widget);
            // 元件上传
        } else {
            // 3d场景中更新图片
            widget.propertyChanged = true;
            buildWidget[0].type = widget.type;
            if (consts.WIDGET_EVENTS.indexOf(widget.action.type) == -1) {
                buildWidget[0].action = widget.action;
            }
            // 浮屏按键保持大小
            if (widget.type == consts.WIDGET_TYPE.FIXEDBTN) {
                buildWidget[0].width = 50;
                buildWidget[0].height = 50;
            }
            widget = $.extend({}, widget, buildWidget[0]);
            // root.updateSelectedWidget(widget);
            setState({selectedWidegt: widget});
            updateWidget(widget);
            eventHelper.trigger(consts.EVENTS.THREED_WIDGET_PROPERTY_CHANGED, widget);
        }
    }

    render() {
        const {editor, closeDialog}=this.props;
        var self = this;
        var root = this.props.root;

        var rStyle = {
            top: "50%",
            left: "50%",
            width: "670px",
            height: "auto",
            display: "block",
            borderRadius: '5px',
            overflow: 'hidden'
        };

        var acceptedFiles = "image/jpg,image/jpeg,image/gif,image/png";
        // 浮屏按键,红包,页面背景支持上传
        if (editor.focusTab == 'fixedbtn' ||
            editor.focusTab == 'redbag' ||
            editor.is_page_back ||
            editor.is_h5_shared_url) {
            acceptedFiles = "image/jpeg,image/jpg,image/png";
        }

        if (editor.is_floating_screen) {
            acceptedFiles = "image/png";
        }
        // 上传图片限制大小为10MB
        var uploadOpts = {
            maxFiles: 1,
            size: 10 * 1024 * 1024,
            acceptedFiles: acceptedFiles
        };
        if (editor.is_logo_md5) {
            uploadOpts.size = 1 * 1024 * 1024;
            uploadOpts.imgType = "logo_md5";//品牌图片
        }

        return (
            <dialog id="uploadPictureDialog" ref="dialog" style={rStyle} className="btg-modal"
                    onselectstart="return false">
                <div className="btg-modal-content">
                    <form noValidate name="form.name" className="form-horizontal">
                        <div className="widget-form-title">
                            <label>{$._('Upload image')}</label>
                        </div>
                        <Upload ref="upload" prefix="uploadPictureDialog" options={uploadOpts}
                                type={consts.WIDGET_TYPE.PICTURE} editor={editor} dialog={this}/>
                        <div className="form-group buttons">
                            <button disabled={this.state.fileUploaded} type="button"
                                    onClick={()=>this.handleOnSubmit()}>
                                <span>{$._("Submit")}</span>
                            </button>
                        </div>
                    </form>
                </div>
                <a href="#" onClick={closeDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
}
const mapStateToProps = ({editor, pageJump}) => {
    return {
        editor,
        pageJump
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({...editorWidget, ...editorDialog, ...editorPage, ...editorActions}, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(UploadPictureDialog);
